<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--react的核心库-->
    <script src="build/react.js" charset="utf-8"></script>
    <!--提供与dom相关的功能-->
    <script src="build/react-dom.js" charset="UTF-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" charset="UTF-8"></script>
    <!--将jsx语法转换成javascript语法-->
</head>
<body>
<!--react渲染的模板内容会插入到dom节点中，作为一个容器-->
<div id="container"></div>
</body>
<!--在react开发中使用jsx，与javascript不兼容，在使用jsx的地方，要设置type="text/label"-->
<!--label是一个转换编辑器，ES6转成可以在浏览器中运行的代码-->
<script type="text/babel">
    //在此处编写react内容
//props是组件自身的属性，一般用于嵌套的内外层组建中，负责传递信息（通常是由父层组件想子层组件传递），props对象中的属性与组件的属性一一对应，负责传递信息
    /*
    var WebName=React.createClass({
        render:function () {
            return <h1>{this.props.webname}</h1>
        }
    });
    var WebLink=React.createClass({
        render:function () {
            return <a href={this.props.weblink}>{this.props.weblink}</a>;
        }
    });
    var WebShow=React.createClass({
        render:function () {
            return(
                    <div>
                        <WebName webname={this.props.wname} />
                        <WebLink weblink={this.props.wlink} />
                    </div>
            );
        }
    });
    ReactDOM.render(
            <WebShow wname="蓝鸥科技" wlink="http://lanou3g.com"/>,
        document.getElementById("container")
    );*/
//    ...this.props(props提供的语法糖，可以将父组件中的全部属性都复制给子组件)
 /*   var Link=React.createClass({
        render:function () {
            return <a{...this.props}>{this.props.name}</a>
        }
    });
    ReactDOM.render(
        <Link href="http://www.lanou3g.com" name="蓝鸥科技" />,
        document.getElementById("container")
    );*/

 //this.props.children children是一个例外，不是跟组件的属性对应的。表示组件的所有子节点
//    定义一个列表组件，列表项中显示的内容，一集列表项的数量都由外部决定
 /*   var ListComponent=React.createClass({
        render:function () {
            return(
            <ul>
                {
//                    利用this.props.children从父组件获取需要展示的列表项内容
//                    获取到列表项内容后，需要遍历children，逐项进行设置，试用React.Children.map方法
//                    返回值：数组对象，数组中的元素市<li>
                    React.Children.map(this.props.children,function (child) {
//                        child是遍历得到的父组件的子节点
                        return <li>{child}</li>
                    })
                }
            </ul>
            );
        }
    });
    ReactDOM.render(
        (
                <ListComponent>
                    <h1>蓝欧科技</h1>
                    <a href="http://www.lanou3g.com">http://www.lanou3g.com</a>
                </ListComponent>
        ),
        document.getElementById("container")
    );
    */
// 属性验证 propTypes
 /*   var ShowTitle=React.createClass({
        propTypes:{
            title:React.PropTypes.string.isRequired
        },
        render:function () {
            return <h1>{this.props.title}</h1>
        }
    });
    ReactDOM.render(
        <ShowTitle title="123"/>,
        document.getElementById("container")
    )*/
 //设置组件的默认值，通过实现组件的getDefaultProps方法，对属性设置默认值
    var MyTile=React.createClass({
        getDefaultProps:function () {
            return{
                title:"蓝鸥"
            };
        },
        render:function () {
            return <h1>{this.props.title}</h1>
        }
    });
    ReactDOM.render(
        <MyTile/>,
        document.getElementById("container")
    );

</script>
</html>